<template>
	<!-- 我的门店 -->
	<view class="store-container">
		<view class="uni-title bold title-prefix">我的门店</view>
		<scroll-view class="store-scroll-view" scroll-x>
			<view class="store-item " v-for="(store, index) in storeList" :key="store.id" :id="store.id" :class="{ selected: selectedStore == store.id }" @click="storeClick(store)">
				<image class="store-item-icon" :src="store.icon" mode=""></image>
				<text class="ellipsis store-item-name">{{ store.name }}</text>
				<text class="store-item-status" :class="store.color">{{ store.status }}</text>
				<view class="store-status-tag" v-if="store.status == '等待提交'">待提交</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	name: 'StoreList',
	props: {
		storeList: {
			type: Array,
			default: () => {
				return [];
			}
		},
		selectedStore: {
			type: String,
			default: ''
		}
	},
	data() {
		return {};
	},
	methods: {
		storeClick(store) {
			// this.selectedStore = store.id;
			this.$emit('update:selectedStore', store.id);
		}
	}
};
</script>

<style scoped lang="scss">
.store-container {
	.store-scroll-view {
		white-space: nowrap;
		width: 100%;
		margin-top: 20upx;

		.store-item {
			width: 259upx;
			border: 1px solid rgb(235, 235, 235);
			border-radius: 8upx;
			margin-right: 24upx;
			display: inline-flex;
			flex-direction: column;
			padding: 15upx 25upx;
			position: relative;

			&.selected {
				border: 1px solid rgb(10, 106, 242);
			}

			.store-item-icon {
				width: 54upx;
				height: 54upx;
			}

			.store-item-name {
				color: rgb(20, 20, 22);
				font-size: 16px;
			}

			.store-item-status {
				font-size: 14px;
			}

			.store-status-tag {
				position: absolute;
				top: 0;
				right: 0;
				padding: 5upx 8upx;
				background: rgb(255, 135, 42);
				border-radius: 0px 8upx 0px 8upx;
				font-size: 10px;
				color: #fff;
			}
		}
	}
}
</style>
